<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="销售总额" count="￥126560">
            <template slot="charts">
              <span>
                周同比&nbsp;&nbsp;&nbsp;&nbsp;56.67%
                <svg
                  t="1697965021578"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7469"
                  width="10"
                  height="10"
                >
                  <path
                    d="M107.1 735.5L457 221c18.6-31.5 59.2-42.1 90.7-23.5 9.8 5.8 17.9 13.9 23.7 23.8l347.2 514.4c18.4 31.6 7.8 72.2-23.8 90.6-10.2 5.9-21.8 9.1-33.6 9h-697c-36.6 0-66.3-29.7-66.2-66.3 0-11.8 3.2-23.4 9.1-33.5z"
                    p-id="7470"
                    fill="#1afa29"
                  ></path></svg
              ></span>
              <span style="display: inline-block; margin-left: 20px">
                日同比&nbsp;&nbsp;&nbsp;&nbsp;19.96%
                <svg
                  t="1697965176071"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7642"
                  width="10"
                  height="10"
                >
                  <path
                    d="M852.801 222h-683.73c-67.315 0-107.285 75.217-69.617 131.005l327.001 484.309c32.486 48.114 102.821 49.555 137.25 2.812l356.729-484.309C961.287 300.353 921.686 222 852.801 222z"
                    p-id="7643"
                    fill="#d81e06"
                  ></path>
                </svg>
              </span>
            </template>
            <template slot="footer">
              <span>日销售额 ￥12423</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="88460">
            <template slot="charts">
              <lineCharts> </lineCharts>
            </template>
            <template slot="footer">
              <span>日访问量 1234</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" count="88460">
            <template slot="charts">
              <barCharts></barCharts>
            </template>
            <template slot="footer">
              <span>转化率 64%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="78%">
            <template slot="charts">
              <progressCharts> </progressCharts>
            </template>
            <template slot="footer">
              <span>
                周同比&nbsp;&nbsp;&nbsp;&nbsp;56.67%
                <svg
                  t="1697965021578"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7469"
                  width="10"
                  height="10"
                >
                  <path
                    d="M107.1 735.5L457 221c18.6-31.5 59.2-42.1 90.7-23.5 9.8 5.8 17.9 13.9 23.7 23.8l347.2 514.4c18.4 31.6 7.8 72.2-23.8 90.6-10.2 5.9-21.8 9.1-33.6 9h-697c-36.6 0-66.3-29.7-66.2-66.3 0-11.8 3.2-23.4 9.1-33.5z"
                    p-id="7470"
                    fill="#1afa29"
                  ></path></svg
              ></span>
              <span style="display: inline-block; margin-left: 20px">
                日同比&nbsp;&nbsp;&nbsp;&nbsp;19.96%
                <svg
                  t="1697965176071"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7642"
                  width="10"
                  height="10"
                >
                  <path
                    d="M852.801 222h-683.73c-67.315 0-107.285 75.217-69.617 131.005l327.001 484.309c32.486 48.114 102.821 49.555 137.25 2.812l356.729-484.309C961.287 300.353 921.686 222 852.801 222z"
                    p-id="7643"
                    fill="#d81e06"
                  ></path>
                </svg>
              </span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './Detail'
import lineCharts from './lineChart'
import barCharts from './barCharts'
import progressCharts from './progressCharts'
export default {
  name: '',

  components: {
    Detail,
    lineCharts,
    barCharts,
    progressCharts,
  },
}
</script>
<style></style>
